<template>
  <div class="container">
    <div class="app-container">
      <el-card class="never">
        <div class="header">
          <el-form :inline="true" ref="remoRef" :model="requestParameters">
            <el-form-item label="活动名称" :span="4" prop="keyword">
              <el-input
                v-model="requestParameters.keyword"
                placeholder="根据编号搜索"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>

          <el-form>
            <el-form-item>
              <el-button size="mini" @click="clear">清除</el-button>
              <el-button size="mini" type="primary" @click="loadList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 警告框 -->
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          show-icon
          :closable="false"
          class="alert"
        ></el-alert>
        <!-- 表格 -->
        <el-table :data="randomslist" style="width: 100%">
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template slot-scope="{ row }">
              <div v-if="row.questionType == 1">单选</div>
              <div v-else-if="row.questionType == 2">多选</div>
              <div v-else>简答</div>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号">
            <template slot-scope="{ row }">
              <div
                v-for="(item1, index) in row.questionIDs"
                :key="index"
                class="a-style"
                @click="showData(item1.id)"
              >
                {{ item1.number }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="warning"
                plain
                circle
                icon="el-icon-delete"
                @click="delData(row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <page-tool
          class="textpage"
          :paginationPage="requestParameters.page"
          :paginationPagesize="requestParameters.pagesize"
          :total="total"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        />
      </el-card>

      <!-- 对话框 -->
      <questions-randoms
        :isShowPuop.sync="isShowPuop"
        :cartId="cartId"
        v-if="isShowPuop"
      />
    </div>
  </div>
</template>

<script>
import { randomsList, deldomsList } from '@/api/hmmm/questions'
import PageTool from '@/module-manage/components/page-tool'
import questionsRandoms from '@/module-hmmm/components/questions-preview'
export default {
  name: 'asdq',
  components: {
    PageTool,
    questionsRandoms
  },
  data() {
    return {
      // 表格总数据
      randomslist: [],
      // 总条数
      total: 0,
      requestParameters: {
        page: 1,
        pagesize: 10,
        keyword: ''
        // username: this.username
      },
      isShowPuop: false,
      text: '',
      radiolist: '2',
      cartId: null
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    clear() {
      this.$refs.remoRef.resetFields()
      this.loadList()
    },
    // 展示对话框
    showData(id) {
      this.isShowPuop = true
      this.cartId = id
    },
    // 删除数据
    async delData(ids) {
      // console.log(ids)
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deldomsList({ id: ids })
        this.randomslist.splice(ids, 1)
        this.loadList()
        this.$message.success('已删除！')
        // console.log(res)
        // console.log(123)
      } catch (error) {
        // console.log(error)
        this.$message.info('已取消删除！')
      }
    },
    async loadList() {
      const res = await randomsList(this.requestParameters)
      // console.log(res)
      this.total = res.data.counts
      this.randomslist = res.data.items
      // console.log(this.randomslist)
    },
    handleCurrentChange(val) {
      this.requestParameters.page = val

      this.loadList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.loadList(this.requestParameters)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .header {
    display: flex;
    justify-content: space-between;
  }
  .alert {
    margin-bottom: 15px;
  }
  .a-style {
    color: skyblue;
    cursor: pointer;
  }
  .textpage {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
